<template>
  <Transition name="slideInRight">
    <div class="yd-drawer">
      <Transition name="fadeIn">
        <div class="yd-drawer-bg" v-show="visible"></div>
      </Transition>
      <Transition name="slideInRight">
        <div class="yd-drawer-container" @click.stop="" v-show="visible">
          <div class="collpase-container mobile-language-nav" @click.stop="">
            <div class="nav-list-wrapper">
              <div class="nav-list">
                <div
                  class="nav-item"
                  @click="onSelectLanguage(item, index)"
                  v-for="(item, index) in memberStore.AppLangList"
                  :key="item.value"
                  :class="index == memberStore.AppLangIndex ? 'active' : ''"
                >
                  <div class="nav-item__inner">
                    <span>{{ item.label }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Transition>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import languageList from "~/data/languageList";
import { useMemberStore } from "../../../../../store";
import { postChangeLanguage } from "../../../../../api/api";
import { useCookie } from "nuxt/app";
type Props = {
  visible: boolean;
};
const memberStore = useMemberStore();
const props = withDefaults(defineProps<Props>(), {
  visible: false,
});
const emits = defineEmits(["update:visible"]);

// 当前语种
const onSelectLanguage = async (item: any, index: number) => {
  if (index == memberStore.AppLangIndex) return;
  let res = await postChangeLanguage(item.value);
  if (res.code === 200) {
    const useCookieLang = useCookie("lang");
    useCookieLang.value = item.value;
    sessionStorage.removeItem("cacheStore");
    location.reload();
  }
};
</script>
<style scoped lang="less">
.collpase-container {
  background-color: #fff;
  overflow-y: auto;
  width: 100vw;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 999;
  .nav-footer {
    padding: 61px 82px;
    border-top: 1px solid #ced8e0;
    .ant-btn {
      font-size: 72px !important;
      border-radius: 20px !important;
      height: 246px !important;
    }
    .nav-footer-user {
      display: flex;
      font-size: 82px;
      align-items: center;
      justify-content: space-between;
      .user-info {
        border-radius: 200px;
        padding: 31px;
        border: 1px solid #ccd6de;
        display: flex;
        align-items: center;
        gap: 41px;
        span {
          width: 580px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #172026;
        }
      }
      .logout {
        color: #ff4060;
      }
    }
  }
  .nav-list-wrapper {
    height: calc(100vh - var(--yd-header-height) - 368px);
    // overflow: hidden;
    padding: 61px 82px;
    overflow-y: auto;
  }
  .nav-list {
    .nav-item {
      display: flex;
      flex-direction: column;
      padding: 102px 0;
      border-bottom: 1px solid #ced8e0;
      font-size: 72px;
      color: #323232;
      &.active {
        color: var(--yd-primary-color);
      }
      .nav-item__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > span {
          width: 85vw;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .icon-arrow-down {
          transition: all 0.5s;
          transform: translateY(20px);
          &.active {
            transform: translateY(-10px) rotate(-180deg);
          }
        }
      }
      .sub-nav-container {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: all 0.5s;
      }
      .sub-nav {
        min-height: 0px;
        color: #36434d;
        .sub-nav-item {
          padding: 102px;
          border-bottom: 1px solid #e6edf2;
          &.active {
            color: var(--yd-primary-color);
          }
          &:last-child {
            border-bottom: 0;
            padding-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
